import React, { useState, useEffect } from 'react'
import { Divider, List, Row, Col, Button, message,Modal } from 'antd'
import '../../../styles/pages/article-list.css'
import axios from 'axios'
import servicePath from '../../../config/apiUrl'
const listColumns = [
    {
        title: "标题",
        dataIndex: "article_name",
        key: "article_name",
    },
]
const { confirm } = Modal
function ArticleList(props) {
    const [list, setList] = useState([])
    useEffect(() => {
        loadList()
    }, [])
    const loadList = () => {
        axios({
            method: "post",
            url: servicePath.getArticleList,
            withCredentials: true
        }).then(res => {
            setList(res.data.list)
        })
    }
    const deleteArticle = (id) => {
        confirm({
            title: '确定要删除这篇博客文章吗?',
            content: '如果你点击OK按钮，文章将会永远被删除，无法恢复。',
            onOk(){
                axios(servicePath.deleteArticle + id, { withCredentials: true }).then(
                    res => {
                        if (res.data.resultCode == 1) {
                            message.success(res.data.msg)
                            loadList()
                        } else {
                            message.error(res.data.msg)
                        }
                    }
                )
            },
            onCancel(){
                message.warning("中止删除")
            }
        })
    }
    const editArticle = (id)=>{
        props.history.push("/article/add/"+id)
    }
    return (
        <List
            header={
                <Row className="list-div">
                    <Col span={8}><b>标题</b></Col>
                    <Col span={3}><b>类别</b></Col>
                    <Col span={3}><b>发布时间</b></Col>
                    <Col span={3}><b>集数</b></Col>
                    <Col span={3}><b>浏览量</b></Col>
                    <Col span={4}><b>操作</b></Col>
                </Row>
            }
            bordered
            dataSource={list}
            renderItem={item => (
                <List.Item>
                    <Row className="list-div">
                        <Col span={8}><b>{item.title}</b></Col>
                        <Col span={3}><b>{item.typeName}</b></Col>
                        <Col span={3}><b>{item.addTime}</b></Col>
                        <Col span={3}><b>{item.view_count}</b></Col>
                        <Col span={3}><b>{item.view_count}</b></Col>
                        <Col span={4}>
                            <Button type="primary" size="small" onClick={editArticle.bind(window,item.id)} style={{ "margin": 5 }}>修改</Button>
                            <Button type="warnning" size="small" onClick={() => { deleteArticle(item.id) }} style={{ "margin": 5 }}>删除</Button>
                        </Col>
                    </Row>
                </List.Item>
            )}
        />
    )
}

export default ArticleList